
<template>
  <div>
    <!--topButtons-->
    <el-row class="operate-button">
      <template v-for="btn in customDataGrid.topButtons">
        <el-button
          v-if="btn.isShow ? btn.isShow() : true"
          :key="btn.name"
          :disabled="!!btn.isDisabled"
          :icon="btn.icon"
          :size="btn.size"
          :plain="btn.plain ? btn.plain : false"
          :round="btn.round ? btn.round : false"
          :type="btn.type ? btn.type : 'primary'"
          @click="btn.click"
        >
          {{ btn.name }}
          <i v-if="btn.rightIcon" :class="['el-icon--right', btn.rightIcon]" />
        </el-button>
      </template>
    </el-row>

    <el-table
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :header-cell-style="{background:'#F5F7FA'}"
      :border="dataGridTree.table.border"
      :data="customDataGrid.list"
      :show-header="dataGridTree.table.showHeader"
      :max-height="650"
    >
      <!--列表索引-->
      <el-table-column
        v-if="dataGridTree.table.showIndex"
        label="序号"
        align="center"
        type="index"
        width="60"
      />
      <!--数据列表-->
      <el-table-column
        v-for="(col,index) in dataGridTree.columns"
        :key="index"
        :align="col.align"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <slot
            v-if="col.slotName"
            :col="col"
            :name="col.slotName"
            :row="scope.row"
            :index="scope.$index"
          />
          <span v-else>{{ scope.row[col.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="dataGridTree.table.showOperation"
        :width="dataGridTree.table.operationWidth"
        :align="dataGridTree.table.operationAlign"
        label="操作"
        :class="operate-text"
      >
        <template slot-scope="scope">
          <template v-for="btn in customDataGrid.rowButtons">

            <el-button
              v-if="btn.isShow ? btn.isShow(scope.row) : true"
              :key="btn.name"
              :disabled="btn.isDisabled ? btn.isDisabled(scope.row) : false"
              :icon="btn.icon"
              :type="btn.type ? btn.type : 'text'"
              :title="btn.showTitle ? btn.showTitle(scope.row) : null"
              @click="btn.click(scope.row, scope.$index)"
            >
              <span v-if="!btn.onlyIcon">{{ btn.name }}</span>
            </el-button>

          </template>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>

export default {
  name: 'SummerDataGrid',
  components: {},
  props: {
    customDataGrid: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dataGridTree: {
        table: {
          customTableClass: '',
          showIndex: true,
          showPagination: true,
          showSingleSelection: false,
          showMultipleSelection: false,
          showOperation: true,
          showColumnSetting: true,
          operationAlign: 'center',
          tableWidth: '100%',
          align: 'left',
          selectionWidth: 35,
          indexWidth: 50,
          operationWidth: 200,
          columns: [],
          selectable: function() {
            return true
          }
        }
      }
    }
  },
  created() {
    Object.assign(this.dataGridTree, this.customDataGrid)
  },
  methods: {
    getDataGridStyle() {
      return {
        marginTop: this.dataGridTree.table.marginTop + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>

  .operation_menu :hover {
    color: #409EFF;
  }

  .el-button span{margin-left: -4px;}

  // 滚动条的宽度
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px; // 横向滚动条
    height: 0px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }

</style>
